// 基本信息
import DialogBox from "@/components/DialogBox";
import { ElForm, ElTooltip } from "element-plus";
import { defineComponent } from "vue";
import LazyUploadFile from "@/components/Upload/LazyUploadFile.vue";
import { showMsg, showTips } from "@/utils/util";
import { useRoute } from "vue-router";
import { serviceAdd, serviceMod } from "@/api/modules/service/service";
import { ResultEnum } from "@/enums/httpEnum";
import { SvcType } from "@/enums/statusEnum";
import { MessageType } from "@/enums/messageEnum";
export default defineComponent({
	props: {
		width: String,
		title: String,
		appId: String,
		detail: {
			type: Object,
			default() {
				return {};
			}
		}
	},
	emits: ["submit"],
	setup(props, { attrs, emit }) {
		const route = useRoute();
		type FormInstance = InstanceType<typeof ElForm>;
		const formRef = ref<FormInstance>();
		const formRule = reactive({
			name: [{ required: true, message: "应用名称不能为空", trigger: "change" }],
			key: [{ required: true, message: "应用标识不能为空", trigger: "change" }]
		});

		watchEffect(() => {});
		onMounted(() => {});

		const validData = () => {
			formRef.value?.validate(async valid => {
				if (valid) {
					let api = props.detail.id ? serviceMod : serviceAdd;
					//web模式没有启动参数
					props.detail.arg = props.detail.svcType == "web" ? "" : props.detail.arg;
					let { code, result, message } = await api({ ...props.detail, appId: route.query.id });
					//操作失败
					if (code != ResultEnum.SUCCESS) {
						showMsg(message, MessageType.error);
						return;
					}
					showTips(code, props.detail.id ? "更新服务" : "添加服务");
					//直接提交表单
					if (!uploadEl.value || !uploadEl.value.getFile()) {
						props.detail.id = result;
						emit("submit", props.detail);
						return;
					}
					//上传文件
					uploadEl.value.submit({ id: result });
				}
			});
		};
		const options = ref(SvcType);
		const uploadEl = ref();
		const uploadSuccess = (res: any) => {
			showTips(res.code, "上传", res.message);
			emit("submit", props.detail);
		};
		const svcTypeChange = () => {
			props.detail.arg =
				props.detail.svcType == "docker" ? `-net host -v app/${route.query.key}/data:/home/${route.query.key}/data` : "";
		};
		return () => {
			return (
				<DialogBox {...attrs} onConfirm={() => validData()} width={props.width} title={props.title}>
					<el-form model={props.detail} ref={formRef} rules={formRule} label-width="100px">
						<el-form-item label="服务名称" prop="name">
							<el-input v-model={props.detail.name} placeholder="请输入服务名称" />
						</el-form-item>
						<el-form-item label="服务标识" prop="key">
							<el-input v-model={props.detail.key} placeholder="请输入服务标识" disabled={props.detail.id} />
						</el-form-item>
						<el-form-item label="安装方式" prop="svcType">
							<el-select
								v-model={props.detail.svcType}
								placeholder="请选择安装方式"
								class="w-full"
								disabled={props.detail.id}
								onChange={svcTypeChange}
							>
								{options.value.map((item: any) => {
									return <el-option key={item.value} label={item.label} value={item.value}></el-option>;
								})}
							</el-select>
						</el-form-item>
						{props.detail.svcType == "docker" && (
							<>
								<el-form-item label="容器名" prop="bin">
									<el-input value={`${route.query.key || ""}.${props.detail.key || ""}`} placeholder="请输入容器名" disabled />
								</el-form-item>
								<el-form-item label="镜像地址" prop="path">
									<el-input v-model={props.detail.path} placeholder="请输入镜像地址" />
								</el-form-item>
							</>
						)}
						{(props.detail.svcType == "bin" || props.detail.svcType == "docker") && (
							<el-form-item label="启动参数" prop="arg">
								<el-input v-model={props.detail.arg} placeholder="请输入启动参数" />
							</el-form-item>
						)}
						{(props.detail.svcType == "bin" || props.detail.svcType == "web") && (
							<el-form-item
								label="服务程序"
								prop="bin"
								v-slots={{
									label: () => {
										return (
											<div>
												{props.detail.svcType == "web" ? "web资源" : "服务程序"}
												{props.detail.svcType == "web" && (
													<ElTooltip
														raw-content
														v-slots={{
															content: () => {
																return <div class="title">上传文件必须是zip包</div>;
															}
														}}
													>
														<i class="iconfont iconhelp-circle pl-2 "></i>
													</ElTooltip>
												)}
											</div>
										);
									}
								}}
							>
								<div class="form-item-upload">
									{props.detail.bin ? (
										<div class="file-info ">
											{props.detail.bin}
											<el-link type="primary" class="delete-server-file ml-2 leading-3" onClick={() => (props.detail.bin = "")}>
												重新上传
											</el-link>
										</div>
									) : null}
									<LazyUploadFile
										style={{ display: props.detail.bin ? "none" : "block" }}
										title={!props.detail.id ? "请输入服务名称" : "点击选服务程序"}
										ref={uploadEl}
										showIcon={false}
										disabled={!props.detail.name}
										v-model:fileUrl={props.detail.bin}
										v-model:fileName={props.detail.bin}
										onSuccess={uploadSuccess}
										width="150px"
										height="32px"
										emptyTips={`请上传${props.detail.svcType == "web" ? "web资源" : "服务程序"}`}
									></LazyUploadFile>
								</div>
							</el-form-item>
						)}
						{/* <el-form-item label="描述" prop="desc">
							<el-input v-model={props.detail.desc} placeholder="描述" auto-size type="textarea" rows={8} />
						</el-form-item> */}
					</el-form>
				</DialogBox>
			);
		};
	}
});
